<template>
    <div class="photoInfo">
        <div class="head">
            <div class="title">{{header.title}}</div>
            <div class="description">
                <span>发表时间：{{header.add_time}}</span>
                <span>点击{{header.click}}次</span>
            </div>
            <hr>
        </div>

        <!--缩略图-->
        <div class="Thumbnail">
            <img class="preview-img" v-for="(item, index) in list" :src="item.src" height="100" @click="$preview.open(index, list)">
        </div>

        <!--描述-->
        <div class="content" v-html="header.content"></div>
        <!--评论组件-->
        <comments :id="this.id"></comments>

    </div>
</template>

<script type="text/ecmascript-6">
    import comments from '../subcomponents/comments.vue'
    import $ from "../../../jquery.js"
    export default {
        data() {
            return {
                id: this.$route.params.id,
                header: [],
                list: []
            }
        },
        components: {comments},
        created() {
            this.getHeader()
            this.getPreview()
        },
        methods: {
            getHeader() {
                this.$http.get("api/getimageInfo/" + this.id).then(result => {
                    if (result.body.status === 0) {
                        this.header = result.body.message[0]
                        // console.log(this.header)
                    }
                })
            },
            getPreview() {
                this.$http.get("api/getthumimages/" + this.id).then(result => {
                    if (result.body.status === 0) {
                        result = result.body.message
                        // $.each(this.list,function (key,value) {
                        //     // console.log(this.list)
                        //
                        // })
                        result.map(function (item) {
                            item.w = 600
                            item.h = 400
                        })
                        this.list = result
                        console.log(this.list)
                    }
                })
            }

        },
    };

</script>

<style lang="stylus" rel="stylesheet/stylus">
    .photoInfo
        padding 0 5px
        padding-bottom 50px
        .head
            .title
                text-align center
                font-size 15px
                color #26a2ff
                line-height 50px
            .description
                display flex
                justify-content space-between
                font-size 13px
                font-weight normal
        .content
            font-size 13px
            font-weight normal
            line-height 20px
        .Thumbnail

            .preview-img
                margin 0 7px
                box-shadow: 0 0 8px #999;
                width 100px
                height 100px
</style>